<template>
  <div class="picturesVedio" curpage="picturesVedio3232313213122">
 
    <el-tabs v-model="activeName" class="goods_tabs" >
 
      <el-tab-pane :label="$t('goods_information_consumer.goods_main_picture')"  :name="TabType.goodsMain" :lazy="lazy[TabType.goodsMain]">
        <template #label>
          <span class="label_pad">{{$t('goods_information_consumer.goods_main_picture')}}</span>
        </template>
        <!-- 商品主图 -->
        <productMain v-if="TabType.goodsMain==activeName" v-bind="detailProps"></productMain>
      </el-tab-pane>
      <el-tab-pane :label="$t('goods_information_consumer.goods_detail_picture')"  :name="TabType.goodsDetail" :lazy="lazy[TabType.goodsDetail]">
       <template #label>
          <span class="label_pad">{{$t('goods_information_consumer.goods_detail_picture')}}</span>
        </template>
        <!-- 商品详情图 -->
          <productDetails v-if="TabType.goodsDetail==activeName" v-bind="detailProps"></productDetails>
      </el-tab-pane>
      <el-tab-pane :label="$t('goods_information_consumer.goods_video')"  :name="TabType.goodsVedio" :lazy="lazy[TabType.goodsVedio]">
       <template #label>
          <span class="label_pad">{{$t('goods_information_consumer.goods_video')}}</span>
        </template>
        <!-- 商品视频 -->
        <goodsVedio v-if="TabType.goodsVedio==activeName" v-bind="detailProps"></goodsVedio>
      </el-tab-pane>
 
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive,onMounted } from "vue";
import productMain from "./PicturesMain/index.vue";
import productDetails from "./PicturesDetail/index.vue";
import goodsVedio from "./goodsVideo/index.vue";
import { UserAuthType, getUserAuth } from "@/api/modules/user";
import { getLocationParams } from "@/utils/index";
const props = withDefaults(
  defineProps<{
    goodsId: string;
  }>(),
  {}
);

const type=ref('');
//接收url参数
const newUrl = new URL(window.location.href);
type.value=getLocationParams(newUrl.href, "type");
// 标签页枚举
 const enum TabType {
  // 商品主图
  goodsMain = "goodsMain",
  // 商品详情图
  goodsDetail = "goodsDetail",
  // 商品视频
  goodsVedio = "goodsVedio"
}

const activeName =  ref<TabType>(TabType.goodsMain);
const lazy = reactive({
  [TabType.goodsMain]: activeName.value !== TabType.goodsMain,
  [TabType.goodsDetail]: activeName.value !== TabType.goodsDetail,
  [TabType.goodsVedio]: activeName.value !== TabType.goodsVedio,

});
 
const detailProps=reactive({
  authArr:{},
  goodsId:props.goodsId//'1751042'////'1751098'"1751098"
})

const auth=reactive({});
const typeEnum={
  'food':"foodGoods",
  'mro':"industrialGoods",
  'sale':"consumerGoods"
}
onMounted(() => {
  
  getUserAuth(typeEnum[type.value]).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      detailProps.authArr=data;
      Object.assign(auth, data);
    }
  });
});

</script>
<style lang="scss" scoped>
@import url("./index.scss");
</style>
